<template>
  <div class="hz-header">
    <div class="top-logo">
      <img src="~IMGS/logo-top.png" alt="">
    </div>
    <div class="header-container">
      <!-- 之后再优化这部分 -->
      <ul class="nav" v-if="isRouter">
        <router-link to='/homepage'>
          <li><a href="javascript:void(0);" :class="{active: currentPage('homepage')}">&#12288;首页&#12288;</a></li>
        </router-link>
        <router-link to='/company-profile'>
          <li><a href="javascript:void(0);" :class="{active: currentPage('company-profile')}">企业概况</a></li>
        </router-link>
        <router-link to='/technical-ability'>
          <li><a href="javascript:void(0);" :class="{active: currentPage('technical-ability')}">技术能力</a></li>
        </router-link>
        <router-link to='/product-center'>
          <li><a href="javascript:void(0);" :class="{active: currentPage('product-center')}">产品中心</a></li>
        </router-link>
        <router-link to='/news-dynamic'>
          <li><a href="javascript:void(0);" :class="{active: currentPage('news-dynamic')}">新闻动态</a></li>
        </router-link>
        <router-link to='/contact-us'>
          <li><a href="javascript:void(0);" :class="{active: currentPage('contact-us')}">联系我们</a></li>
        </router-link>
      </ul>
      <ul class="nav2" v-else>
        <li><a href="/Tpl/index.html">&#12288;首页&#12288;</a></li>
        <li><a href="/Tpl/index.html#/company-profile">企业概况</a></li>
        <li><a href="/Tpl/index.html#/technical-ability">技术能力</a></li>
        <li><a href="/Tpl/index.html#/product-center">产品中心</a></li>
        <li><a href="/Tpl/index.html#/news-dynamic">新闻动态</a></li>
        <li><a href="/Tpl/index.html#/contact-us">联系我们</a></li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'hz-header',
    props: {
      isRouter: {
        type: Boolean,
        default: true
      }
    },
    mounted() {
    },
    methods: {
      currentPage(index) {
        return -1<this.$route.path.indexOf(index) || -1<location.href.indexOf(index);
      }
    }
  }
</script>

<style lang="less">
  @import '~COMMON/common.less';

  .hz-header {
    text-align: center;
    .top-logo {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 105px;
      >img {
      }
    }
    .header-container {
      .nav {
        display: table;
        margin: 0 auto;
        width: 880px;
        >a {
          display: table-cell;
          >li>a {
            line-height: 55px;
            &.active {
              color: #47beda;
            }
            &:hover {
              color: #47beda;
            }
          }
        }
      }
      // 没有router-link时
      .nav2 {
        display: table;
        margin: 0 auto;
        width: 880px;
        >li {display: table-cell;}
        >li>a {
          line-height: 55px;
          &:hover {
            color: #47beda;
          }
        }
      }
    }
  }
</style>